import React, { Component } from 'react';
import { connect } from 'dva';
import {
    Row,
    Col,
    Icon,
    Card,
    Tabs,
    Table,
    Radio,
    DatePicker,
    Tooltip,
    Menu,
    Dropdown,
    Select,
} from 'antd';
import numeral from 'numeral';
import {
    ChartCard,
    yuan,
    MiniArea,
    MiniBar,
    MiniProgress,
    Field,
    Bar,
    Pie,
    TimelineChart,
} from '../../components/Charts';
import Trend from '../../components/Trend';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import NumberInfo from '../../components/NumberInfo';
import { getTimeDistance } from '../../utils/utils';

import styles from './PoorStatistics.less';

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const { Option } = Select;
const { Description } = DescriptionList;

@connect(({ chart, loading }) => ({
    chart,
    loading: loading.effects['chart/fetch'],
}))
export default class PoorStatistics extends Component {
    state = {
        salesType: 'all',
        currentTabKey: '',
        rangePickerValue: getTimeDistance('year'),
    };

    componentDidMount() {
        this.props.dispatch({
            type: 'chart/fetch',
        });
    }

    handleChangeSalesType = (e) => {
        this.setState({
            salesType: e.target.value,
        });
    };

    render() {
        const { rangePickerValue, salesType, currentTabKey } = this.state;
        const { chart, loading } = this.props;
        const {
            visitData,
            visitData2,
            salesData,
            searchData,
            offlineData,
            offlineChartData,
            salesTypeData,
            salesTypeDataOnline,
            salesTypeDataOffline,
        } = chart;

        const salesPieData =
            salesType === 'all'
                ? salesTypeData
                : salesType === 'online' ? salesTypeDataOnline : salesTypeDataOffline;

        // const iconGroup = (
        //     <span className={styles.iconGroup}>
        //         <Dropdown overlay={menu} placement="bottomRight">
        //             <Icon type="ellipsis" />
        //         </Dropdown>
        //     </span>
        // );

        return (
            <div>
                <PageHeaderLayout
                    title="不良统计"
                    logo={<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />}
                >
                <Row gutter={24} style={{ marginTop: 30 }}>
                    <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                        <Card
                            loading={loading}
                            className={styles.salesCard}
                            bordered={false}
                            title="上海云钱网络科技有限公司"
                            bodyStyle={{ padding: 24 }}
                            extra={
                                <div className={styles.salesCardExtra}>
                                    {/* {iconGroup} */}
                                    <div className={styles.salesTypeRadio}>
                                        <Radio.Group value={salesType} onChange={this.handleChangeSalesType}>
                                            <Radio.Button value="all">全部渠道</Radio.Button>
                                            <Radio.Button value="online">线上</Radio.Button>
                                            {/* <Radio.Button value="offline">门店</Radio.Button> */}
                                        </Radio.Group>
                                    </div>
                                </div>
                            }
                            style={{ marginTop: 24, minHeight: 509 }}
                        >
                            <h4 style={{ marginTop: 8, marginBottom: 32 }}>销售额</h4>
                            <Pie
                                hasLegend
                                subTitle="销售额"
                                total={yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))}
                                data={salesPieData}
                                valueFormat={val => yuan(val)}
                                height={248}
                                lineWidth={4}
                            />
                        </Card>
                    </Col>
                </Row>
                </PageHeaderLayout>

            </div>
        );
    }
}
